<!-- followed bootstrap css names -->
<!doctype html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/frontend-mini-challenges/css/assets/index-BGYYOX9j.js"></script>
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/css/assets/navbar-C7CEKbuS.js">
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/css/assets/header-B517VqJC.js">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/css/assets/navbar-Dkne97UN.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/css/assets/header-DAZPOirm.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/css/assets/index-Bk3VOvK-.css">
  </head>

  <body>
    <div class="container accordion-container">
      <label class="fw-bold">
        Is multiple open accordion allowed?
        <input type="checkbox" name="field1" id="multiple-open-checkbox" />
      </label>
      <div class="accordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button">Step 1</button>
            <span class="accordion-arrow"></span>
          </h2>
          <div class="accordion-panel">
            <div class="accordion-content">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ipsum faucibus vitae aliquet nec
                ullamcorper.
              </p>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button">Step 2</button>
            <span class="accordion-arrow"></span>
          </h2>
          <div class="accordion-panel">
            <div class="accordion-content">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Eu consequat ac felis donec et.
                Dignissim convallis aenean et tortor at. Feugiat pretium nibh ipsum consequat nisl
                vel pretium lectus quam.
              </p>
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button">Step 3</button>
            <span class="accordion-arrow"></span>
          </h2>
          <div class="accordion-panel">
            <div class="accordion-content">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Nec tincidunt praesent semper feugiat
                nibh. Condimentum vitae sapien pellentesque habitant. Suscipit adipiscing bibendum
                est ultricies integer quis auctor elit. Lacus sed turpis tincidunt id aliquet risus.
                Tellus id interdum velit laoreet id donec ultrices.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
